<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单发货</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .cell{
            text-align: center;
        }
        .is-leaf{
            color: rgb(111, 174, 217);
        }
        h3 a{
            text-decoration: none;
            color: black;
        }
        .form1 .el-form-item{
            margin: 0 40px;
        }
        .table1{
            width: 100%;
        }
        .table1 td{
            height: 40px;
        }
        .table2 td{
            width: 300px;
        }
        .status{
            color: red;
        }
    </style>
</head>
<body>
    <h3>
        <a href="">订单发货</a>
    </h3>
    <div id="app">
        <el-form :inline="true" class="demo-form-inline" size="mini">
            <el-form-item>
                <el-button type="primary" icon="el-icon-printer" @click="printOrder">打印订单</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-printer" @click="printSendOrder">打印发货单</el-button>
            </el-form-item>
        </el-form>
        <el-dialog v-loading="loading" :visible.sync="dialogFormVisible" width="800px" @close="closeDialog()">
            <h1 style="text-align: center; margin-top: -30px;">订单信息</h1>
            <table class="table1">
                <tr>
                    <td>购货人：{{order.customer.name}}</td>
                    <td>发货单号：{{sendNumber}}</td>
                    <td>发货时间：{{sendTime}}</td>
                </tr>
                <tr>
                    <td>付款时间：{{order.dealTime}}</td>
                    <td>支付方式：{{order.payType}}</td>
                    <td>手机：{{order.customer.telephone}}</td>
                </tr>
                <tr>
                    <td>电话：{{order.customer.telephone}}</td>
                    <td>收货地址：{{order.customer.address}}</td>
                    <td>收货人：{{order.customer.name}}</td>
                </tr>
                <tr>
                    <td>邮箱：{{order.customer.email}}</td>
                </tr>
            </table>
            <el-table
                    :data="currentOrder1"
                    style="width: 100%"
                    :default-sort = "{prop: 'id', order: 'ascending'}"
                    :border="border">
                <el-table-column prop="id" label="订单编号" height="40" sortable>
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.commodity.pname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.commodity.pname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="属性">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.commodity.pprice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="小计">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" name="price">{{ scope.row.number * scope.row.commodity.pprice }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="total" style="text-align: right; margin: 20px 0;">
                <span>商品总金额：￥{{ price }}</span>
                <span style="margin: 0 20px;">应付款：￥{{ price }}</span>
            </div>
            <div class="operator" style="text-align: right">
                <span>打印时间：{{ operationTime }}</span>
                <span style="margin: 0 20px;">操作者：{{ user.realname }}</span>
            </div>
        </el-dialog>

        <el-dialog v-loading="loading" :visible.sync="dialogSendVisible" width="800px" @close="closeDialog()">
            <h1 style="text-align: center; margin-top: -30px;">发货单</h1>
            <table class="table1">
                <tr>
                    <td>购货人：{{order.customer.name}}</td>
                    <td>发货单号：{{sendNumber}}</td>
                    <td>发货时间：{{sendTime}}</td>
                </tr>
                <tr>
                    <td>付款时间：{{order.dealTime}}</td>
                    <td>支付方式：{{order.payType}}</td>
                    <td>手机：{{order.customer.telephone}}</td>
                </tr>
                <tr>
                    <td>电话：{{order.customer.telephone}}</td>
                    <td>收货地址：{{order.customer.address}}</td>
                    <td>收货人：{{order.customer.name}}</td>
                </tr>
                <tr>
                    <td>邮箱：{{order.customer.email}}</td>
                </tr>
            </table>
            <el-table
                    :data="currentOrder1"
                    style="width: 100%"
                    :default-sort = "{prop: 'id', order: 'ascending'}"
                    :border="border">
                <el-table-column prop="id" label="订单编号" height="40" sortable>
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.commodity.pname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.commodity.pname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="属性">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.commodity.pprice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="小计">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" name="price">{{ scope.row.number * scope.row.commodity.pprice }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="total" style="text-align: right; margin: 20px 0;">
                <span>商品总金额：￥{{ price }}</span>
                <span style="margin: 0 20px;">应付款：￥{{ price }}</span>
            </div>
            <div class="operator" style="text-align: right">
                <span>打印时间：{{ operationTime }}</span>
                <span style="margin: 0 20px;">操作者：{{ user.realname }}</span>
            </div>
        </el-dialog>
        <el-table
                v-loading="loading"
                :data="orders"
                style="width: 100%"
                :default-sort = "{prop: 'id', order: 'ascending'}"
                :border="border"
                ref="orderTable"
                @current-change="selectOrder">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号" width="90" sortable>
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" width="90">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单状态" width="90">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" class="status">{{ scope.row.orderStatus == -2 ? "未发货" : "" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.commodity.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品数量" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column label="应收金额" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">￥{{ scope.row.commodity.pprice * scope.row.number}}</span>
                </template>
            </el-table-column>
            <el-table-column label="赠送积分" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.commodity.pprice * scope.row.number}}</span>
                </template>
            </el-table-column>
            <el-table-column label="收货人">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.customer.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="发货地址">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.commodity.plocal }}</span>
                </template>
            </el-table-column>
            <el-table-column label="收货地址">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.customer.address }}</span>
                </template>
            </el-table-column>
            <el-table-column label="下单时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.commodity.paddtime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单备注">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.explain }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-bicycle" @click="send(scope.$index, scope.row)">发货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="发货确认" :visible.sync="deliver" width="800px" @close="closeDialog()">
            <div>
                <table class="table2">
                    <tr>
                        <td><span style="margin-left: -3px;">订单编号：{{ shipping.orderNumber }}</span></td>
                        <td><span>发货单号：{{ shipping.shippingNumber }}</span></td>
                    </tr>
                </table>
            </div>
            <el-form style="margin-top: 20px;" :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="配送方式：">
                    <el-select v-model="shipping.shippingMethodId" @clear="clearLogistics" @change="findCar" style="width: 150px;" clearable placeholder="请选择配送方式">
                        <el-option
                                v-for="item in logistics"
                                :key="item.logisticsId"
                                :label="item.logisticsName"
                                :value="item.logisticsId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车辆选择：" style="margin-left: 60px;">
                    <el-select v-model="shipping.shippingTruckId" @clear="clearVehicles" @change="findDriver" style="width: 150px;" clearable placeholder="请选择配送车辆">
                        <el-option
                                v-for="item in vehicles"
                                :key="item.vehicleId"
                                :label="item.vehicleName"
                                :value="item.vehicleId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="司机选择：">
                    <el-select v-model="shipping.driverId" @change="findDriverById(shipping.driverId)" style="width: 150px;" clearable placeholder="请选择车辆驾驶员">
                        <el-option
                                v-for="item in drivers"
                                :key="item.driverId"
                                :label="item.driverName"
                                :value="item.driverId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：" style="margin-left: 60px;">
                    <el-col>
                        <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="shipping.shippingDate"
                                style="width: 145px;"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <div>
                <table class="table2">
                    <tr>
                        <td><span style="margin-left: -3px;">司机电话：{{ driver.driverControl }}</span></td>
                        <td><span>车辆牌号：{{ vehicle.numberPlate }}</span></td>
                    </tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deliver = false">取 消</el-button>
                <el-button type="primary" @click="addShipping">确 定</el-button>
            </div>
        </el-dialog>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
           return{
               // 当前页数
               currentPage: 1,
               // 发货订单总数
               count : 0,
               // 每页的数据
               page_size : [5,10],
               // 当前每页的数据
               pageSize : 5,
               // 分页背景
               back: true,
               // 表格边框
               border: true,
               // 所有未发货的订单信息
               orders: [],
               // 当前选中的订单行
               currentOrder: null,
               currentOrder1: {},
               // 打印订单信息模态框
               dialogFormVisible: false,
               // 打印发货单模态框
               dialogSendVisible: false,
               // 确认发货模态框
               deliver: false,
               order: {
                   customer:{
                       name: "",
                   },
               },
               // 用户信息
               user: {},
               // 操作时间
               operationTime: "",
               // 商品金额
               price: "",
               // 发货时间
               sendTime: new Date().toLocaleDateString(),
               // 发货单号
               sendNumber: parseInt(Math.random()*123456789),
               // 物流方式
               logistics: [],
               // 车辆信息
               vehicles: [],
               // 驾驶员信息
               drivers: [],
               // 当前选中的驾驶员
               driver: {},
               // 当前选择的驾驶员的车辆
               vehicle: {},
               // 确认发货的订单信息
               shipping: {},
               // 遮罩层
               loading: true,
           }
        },
        mounted(){
            this.loadOrders();
            this.loadUser();
            this.loadLogistics();
        },
        methods:{
            // 通过驾驶员id查找驾驶员和车辆
            findDriverById(id){
                axios.get("/driverId?driverId=" + id)
                    .then(res => {
                        this.driver = res.data;
                    })
                axios.get("/vehicleId?driverId=" + id)
                    .then(res => {
                        this.vehicle = res.data;
                    })
            },
            // 加载未发货的订单信息
            loadOrders(){
                this.loading = true;
                axios.get("/orders/"+this.currentPage+"/"+this.pageSize)
                    .then(res => {
                        this.orders = res.data.data;
                        this.count = res.data.count;
                        this.order = this.orders[0];
                        this.loading = false;
                    });
            },
            // 加载用户信息
            loadUser() {
                axios.get("/user")
                    .then(res => {
                        this.user = res.data;
                    })
            },
            // 加载物流方式
            loadLogistics(){
                axios.get("/logistics")
                    .then(res => {
                        this.logistics = res.data;
                    })
            },
            // 确认发货，将信息添加到发货表
            addShipping(){
                if(!this.shipping.shippingMethodId){
                    this.$message({
                        type: "info",
                        message: "配送方式不能为空"
                    });
                    return;
                }
                if(!this.shipping.shippingTruckId){
                    this.$message({
                        type: "info",
                        message: "车辆不能为空"
                    });
                    return;
                }
                if(!this.shipping.driverId){
                    this.$message({
                        type: "info",
                        message: "驾驶员不能为空"
                    });
                    return;
                }
                if(!this.shipping.shippingDate){
                    this.$message({
                        type: "info",
                        message: "发货时间不能为空"
                    });
                    return;
                }
                axios.post("/shipping",this.shipping)
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "发货成功",
                            });
                            this.loadOrders();
                        }
                    });
                this.deliver = false;
            },
            // 清除配送方式
            clearLogistics(){

            },
            // 清除车辆
            clearVehicles(){

            },
            // 通过配送方式查找车辆
            findCar(){
                this.$set(this.shipping,"shippingTruckId",'');
                this.$set(this.shipping,"driverId",'');
                axios.get("/vehicle?logisticsId=" + this.shipping.shippingMethodId)
                    .then(res => {
                        this.vehicles = res.data;
                    })
            },
            // 通过车辆id查询驾驶员信息
            findDriver(){
                this.$set(this.shipping,"driverId",'');
                axios.get("/driver?vehicleId=" + this.shipping.shippingTruckId)
                    .then(res => {
                        this.drivers = res.data;
                    })
            },
            // 确认发货
            send(index,row){
                // 订单编号
                this.shipping.orderNumber = row.orderId;
                // 发货单号
                this.shipping.shippingNumber = parseInt(Math.random()*12345678900);
                // 发货地
                this.shipping.startPlace = row.commodity.plocal;
                // 收货地
                this.shipping.endPlace = row.customer.address;
                this.deliver = true;
            },
            // 打印订单
            printOrder(){
                this.operationTime = new Date().toLocaleString();
                if(this.currentOrder){
                    this.dialogFormVisible = true;
                }else {
                    this.$message({
                        type: "info",
                        message: "请选择要打印的订单"
                    });
                }
            },
            // 打印发货单
            printSendOrder(){
                this.operationTime = new Date().toLocaleString()
                if(this.currentOrder){
                    this.dialogSendVisible = true;
                }else {
                    this.$message({
                        type: "info",
                        message: "请选择要打印的订单"
                    });
                }
            },
            // 选中的角色行
            selectOrder(row){
                this.currentOrder = row;
                this.order = row;
                this.currentOrder1 = new Array();
                this.currentOrder1[0] = row;
                this.price = this.currentOrder1[0].money;
                //全部取消
                this.$refs.orderTable.clearSelection();
                //选中当前行
                this.$refs.orderTable.toggleRowSelection(this.currentOrder);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadOrders();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadOrders();
            },
            closeDialog(){
                this.dialogSendVisible = false;
                this.dialogFormVisible = false;
                this.driver.driverControl = "";
                this.vehicle.numberPlate = "";
                this.shipping = {};
            },
        },
    });
</script>
</html>